<template>
  <div>
   <div>
      <el-form
        :model="searchParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="卷名" prop="roleName">
          <el-input
            v-model="searchParams.trainName"
            placeholder="请输入卷名"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="searchTable()"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="emptySearch()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; flex-direction: row">
      <div class="left-card">
        <div class="left-card-bac">
          <div class="left-card-childer">
            <span style="font-size: 24px; font-weight: bold">
              {{ dataInfo.all }}
            </span>
            <span> 全部 </span>
          </div>
          <div class="left-card-childer">
            <span style="font-size: 24px; font-weight: bold">
              {{ dataInfo.completed }}
            </span>
            <span> 已完成 </span>
          </div>
          <div class="left-card-childer">
            <span style="font-size: 24px; font-weight: bold">
              {{ dataInfo.underWay }}
            </span>
            <span> 培训中 </span>
          </div>
          <div class="left-card-childer">
            <span style="font-size: 24px; font-weight: bold">
              {{ dataInfo.waitForDistribution }}
            </span>
            <span> 待分配 </span>
          </div>
          <div class="left-card-childer">
            <span style="font-size: 24px; font-weight: bold">
              {{ dataInfo.postpone }}
            </span>
            <span> 延期 </span>
          </div>
          <div class="left-card-childer">
            <el-progress
              :width="80"
              type="circle"
              :stroke-width="3"
              :percentage="dataInfo.RateOfCompletion"
            ></el-progress>
            <span> 完成率 </span>
          </div>
        </div>
        <div></div>
      </div>
      <div style="display: flex; flex-wrap: wrap; width: 80%">
        <div
          class="right-card "
          :class="{ 'right-card-shadow' : item.referenceStatus == 1,'right-card-shadow' : item.referenceStatus == 2}"
          v-for="(item, index) in taskList"
          :key="index"
        >
          <div>
            <span style="font-size: 18px">{{ item.trainName }}</span>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              width: 100%;
              align-items: center;
              color: #808080;
            "
          >
            <span>{{ item.startDate }}</span
            >到<span>{{ item.endDate }}</span>
          </div>
          <div style="width: 100px">
            <el-avatar
              v-for="(item2, index2) in item.avatrList"
              :key="index2"
              size="small"
              :src="item2"
            ></el-avatar>
          </div>
          <div style="width: 100%">
            <el-progress :percentage="item.percentage"></el-progress>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
            "
          >
            <div class="tag" :class="{ activeColor: item.tag == '不急' }">
              <span>{{ item.tag }}</span>
            </div>
            <el-button size="mini" icon="el-icon-time" :round="true"
              ><span v-if="item.time < 0">超时</span>
              <span v-else>剩余</span>
              <span style="color: #00baad">{{ item.time }}</span
              >天</el-button
            >
          </div>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import { getTaskInfo, getDataStatistics } from "@/api/index/index";
export default {
  data() {
    return {
      searchParams: {},
      taskList: [],
      showSearch: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      dataInfo: {},
    };
  },

  mounted() {},

  created() {
    this.getTaskInfo();
     this.getDataStatistics();
  },
  methods: {
    searchTable() {
      this.getTaskInfo();
    },
    async getTaskInfo() {
      const res = await getTaskInfo(this.searchParams);
      console.log(res);
      this.taskList = res.data;
    },

    async getDataStatistics() {
      const res = await getDataStatistics();
      console.log(res);
      this.dataInfo = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.left-card {
  width: 20%;
  height: 100vh;
  opacity: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  div {
    padding: 5px;
  }
}
.left-card-bac {
  display: flex;
  flex-wrap: wrap;
  div:nth-child(2) {
    background: rgba(232, 247, 243, 1);
  }
  div:nth-child(3) {
    background: rgba(231, 243, 254, 1);
  }
  div:nth-child(4) {
    background: rgba(255, 247, 232, 1);
  }
  div:nth-child(5) {
    background: rgba(253, 235, 233, 1);
  }
  div:nth-child(6) {
    background: rgba(232, 247, 243, 1);
  }
}

.left-card-childer {
  width: 120px;
  height: 140px;
  opacity: 1;
  border-radius: 10px;
  background: rgba(240, 240, 255, 1);
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  span {
    padding: 10px;
  }
}

.right-card {
  width: 300px;
  height: 190px;
  opacity: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  div {
    padding: 5px;
  }
}
.right-card-shadow {
  box-shadow: 0px 2px 21px rgba(182, 242, 206, 0.5);
}

.tag {
  width: 50px;
  height: 20px;
  opacity: 1;
  border-radius: 20px;
  background: rgba(212, 48, 48, 0.26);
  border: 1px solid rgba(212, 48, 48, 0.71);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 10px;
    color: #d43030;
  }
}

.activeColor {
  background: rgba(255, 195, 0, 0.26);
  border: 1px solid rgba(255, 195, 0, 0.28);
  span {
    font-size: 10px;
    color: #ffc300;
  }
}
</style>
